CSS : La base des flexbox

Flexbox, ou Flexible Box Layout, est un modèle de disposition en CSS qui permet de créer des mises en page flexibles et adaptatives. Il fournit un moyen efficace de répartir l'espace entre les éléments d'une boîte (container) et de les aligner de manière cohérente, quel que soit leur taille ou leur contenu.

• Simplicité : Flexbox simplifie la création de mises en page complexes qui étaient traditionnellement difficiles à réaliser avec CSS.

• Réactivité : Il permet de créer des mises en page réactives qui s'ajustent automatiquement à différentes tailles d'écran et résolutions.

• Alignement Facile : Il offre un contrôle précis pour l'alignement des éléments, facilitant ainsi la création de barres latérales, de menus de navigation, etc.

• Répartition Efficace de l'Espace : Flexbox répartit l'espace disponible de manière efficace, ce qui est utile pour créer des galeries d'images, des listes d'éléments, etc.

• Conteneur Flex : Un élément HTML qui devient un conteneur Flexbox lorsque vous appliquez display: flex;. Il contient un ou plusieurs éléments flexibles.

• Élément Flexible : Les éléments à l'intérieur d'un conteneur Flexbox sont appelés éléments flexibles. Ils sont disposés en fonction des règles Flexbox.

• Axe Principal (Main Axis) : Il représente la direction principale le long de laquelle les éléments flexibles sont alignés. Par défaut, il s'agit de l'axe horizontal.

• Axe Transversal (Cross Axis) : Il est perpendiculaire à l'axe principal.

• display: flex; : Cette propriété transforme un élément en conteneur Flexbox, ce qui permet de l'utiliser pour organiser ses éléments enfants en ligne ou en colonne.

• flex-direction : Elle détermine la direction de l'axe principal (par exemple, row pour l'horizontale ou column pour la verticale).

• justify-content : Elle aligne les éléments le long de l'axe principal.

• align-items : Elle aligne les éléments le long de l'axe transversal.

• flex-wrap : Elle contrôle le comportement des éléments flexibles lorsqu'ils dépassent la largeur du conteneur.

.conteneur {
    display: flex;
    flex-direction: row; /* ou column pour une disposition verticale */
    justify-content: center; /* Alignement horizontal au centre */
    align-items: center; /* Alignement vertical au centre */
}
Copy

<div class="conteneur">
    <div class="element">Élément 1</div>
    <div class="element">Élément 2</div>
    <div class="element">Élément 3</div>
</div>
Copy

.conteneur {
    justify-content: space-between; /* Répartit l'espace entre les éléments */
}
Copy

.conteneur {
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */
}
.element {
    flex: 1; /* Tous les éléments flexibles ont la même largeur */
}
Copy